<template>
	<div>
		<el-card class="!border-none" shadow="never">
			<el-page-header content="审核详情" @back="$router.back()" />
			<div class="btnR">
				<el-button v-if="formData.status == 2 || formData.status == 3" type="primary" plain @click="handleStatus">上架</el-button>
				<el-button v-if="formData.status == 1" type="primary" plain @click="handleStatus">下架</el-button>
			</div>
		</el-card>
		<el-card class="mt-4 !border-none" header="内容信息" shadow="never">
			<el-form ref="formRef" class="ls-form" :model="formData" label-width="120px">
				<el-form-item label="内容：">{{formData.content}}</el-form-item>
                <el-form-item label="图片：">
					<!-- <el-avatar v-for="(item,index) in formData.image_urls" :key="'image_urls'+index" :src="[item]" :preview-src-list="item" :size="58" /> -->
					<el-image style="width: 58px; height: 58px;margin-right: 10px;"
						v-for="(item,index) in formData.pics" :key="'image_urls'+index" 
						:src="item"
						:zoom-rate="1.2"
						:max-scale="7"
						:min-scale="0.2" 
						fit="contain"
						:preview-teleported="true"
						:initial-index="index"
						:preview-src-list="formData.pics"></el-image>
				</el-form-item>
				<el-form-item label="位置信息：">{{formData.address}}</el-form-item>
				<el-form-item label="经纬度：">{{formData.lon}}{{formData.lon != ''?',':''}}{{ formData.lat }}</el-form-item>
				<el-form-item label="内容状态：">{{formData.status == 1 ? '上架':'下架'}}</el-form-item>
			</el-form>
		</el-card>
		<el-card class="mt-4 !border-none" header="发布信息" shadow="never">
			<el-form ref="formRef" class="ls-form" :model="formData" label-width="120px">
				<el-form-item label="发布人：">{{formData.userinfo.realname}}</el-form-item>
                <el-form-item label="发布时间：">{{formData.create_time}}</el-form-item>
				<el-form-item label="ip地址信息：">{{formData.ip}} {{ formData.prov }}</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script lang="ts" setup name="demandReviewDetail">
	import type { FormInstance } from 'element-plus'
	import { infos, delDynamic } from '@/api/safe';
	 import feedback from '@/utils/feedback'
	const route = useRoute()
	const formData:any = reactive({
		id: '',
		content: '',
        pics: [],
        address: '',
        lon: '',
        lat: '',
        status: '',
        userinfo: {
            realname: ''
        },
        create_time: '',
        ip: '',
        prov: '',
	})
	
	const handleStatus = async () => {
        console.log(status)
        if (formData.status == 1) {
            try{
                await feedback.confirm('下架之后，移动端用户及发布人不能看到该内容，是否确认下架？')
                await delDynamic({
                    id: formData.id,
                    status: 3
                })
				getDetails()
            }catch(error){
                console.log(error)
            }
        } else {
            try{
                await feedback.confirm('上架之后，移动端用户及发布人可看到该内容，是否确认上架？')
                await delDynamic({
                    id: formData.id,
                    status: 1
                })
				getDetails()
            }catch(error){
                console.log(error)
            }
        }
    }
	
	
	const formRef = shallowRef<FormInstance>()

	const getDetails = async () => {
		const data = await infos({
			id: route.query.id
		})
		Object.keys(formData).forEach((key) => {
			//@ts-ignore
			formData[key] = data[key]
			// if( key=='image_urls' ){
			// 	console.log(data[key],123456);
			// 	formData[key] = data[key][0]
			// }
		})
	}

	route.query.id && getDetails();
</script>
<style scoped lang="scss">
	.btnR{
		position: absolute;
		right: 50px;
		top: 30px;
	}
</style>